<template>
  <!--运输路线创建-->
  <div class="transport-route-index module-index">
    <breadcrumb-title :title="title"/>

    <div class="module-body">
      <order-module-title title="运输地址"/>
      <div class="transport-route-body">
        <div class="body-item item-title right-border">
          <span style="color: red">*</span>
          始发地
        </div>
        <div class="body-item item-title">
          <span style="color: red">*</span>
          目的地
        </div>
        <el-select class="body-item"
                   v-model="data.origin"
                   placeholder="请选择始发地">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-select class="body-item"
                   v-model="data.destination"
                   placeholder="请选择目的地">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <div style="clear: both"></div>
      </div>

      <order-module-title title="费用" class="bottom-margin"/>
      <el-input type="text" v-model="data.fee" style="width: 20%" class="bottom-margin"/>
      <el-select class="select"
                 style="margin-left: 20px"
                 v-model="data.unit"
                 placeholder="选择单位">
        <el-option
            v-for="item in unit"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <order-module-title title="报价有效期" class="bottom-margin"/>
      <el-date-picker
          class="date-picker"
          v-model="data.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始日期">
      </el-date-picker>
      <span>&nbsp; - &nbsp;</span>
      <el-date-picker
          class="date-picker bottom-margin"
          style="margin-left: 10px"
          v-model="data.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束日期">
      </el-date-picker>
    </div>

    <div class="submit">
      <el-button @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>

    </div>
  </div>
</template>

<script>
import BreadcrumbTitle from "@/components/title/BreadcrumbTitle";
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";
import {ifNullToObject} from "@/utils/constant/listElementCompute";
import {transportCreate} from "@/apis/driver";
import {transportGetById} from "@/apis/driver";

export default {
  name: "TransportRoute",
  components: {
    BreadcrumbTitle,
    OrderModuleTitle,
  },
  data() {
    return {
      title: '',
      data: {
        destination: '',
        origin: '',
        startTime: '',
        endTime: '',
        fee: '',
        unit: '',
        id: '',
      },
      options: [
        {
          value: '上海市',
          label: '上海市'
        }, {
          value: '深圳市',
          label: '深圳市'
        }, {
          value: '广州市',
          label: '广州市'
        }, {
          value: '北京',
          label: '北京'
        }, {
          value: '惠州市',
          label: '惠州市'
        }],
      unit: [
        {
          value: '元/kg',
          label: '元/kg'
        }, {
          value: '元/km',
          label: '元/km'
        }],
      ifShow: false,
      number: '',
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.title = this.$route.meta.title
      this.number = this.$route.query.orderNumber

      // 获取运输信息根据id
      if(this.number !== undefined){
          transportGetById(this.number).then(resp => {
            if(resp?.data?.code === 1){
              this.data = resp?.data?.data
              this.data.origin = resp?.data?.data?.originPlace
              this.data.startTime = resp?.data?.data?.validStartTime
              this.data.endTime = resp?.data?.data?.validEndTime
            }else{
              this.$message.error(resp?.data?.msg)
            }
          })
      }
    },
    // 保存路线
    save(){
      this.data.id = localStorage.getItem("id")
      // 必要信息填写   递归算法进行判断
      if(!ifNullToObject(this.data)){this.$message.error("请将必要信息填写完整")}
      else{
        transportCreate(this.data).then(resp => {
          if(resp?.data.code === 1){
            this.$message.success("添加成功")
            this.cancel()
          }else{this.$message.error(resp?.data?.msg)}
        })

      }
    },
    // 返回
    cancel(){
      this.$router.push({name: 'routine'}).catch(r => console.log(r))
    }
  }
}
</script>

<style scoped lang="scss">

.bottom-margin{
  margin-bottom: 10px ;
}

.submit {
  margin: 20px 18px;
}

.transport-route-body {

  margin: 10px 0;
  width: 881px;
  max-width: 881px;
  text-align: center;
  border-top: 1px black solid;
  border-left: 1px black solid;

  .body-item {
    width: 440px;
    float: left;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
    border-right: 1px black solid;
    border-bottom: 1px black solid;
  }

  .item-title {
    background-color: #B3C0D1;
  }

}


</style>